<!--
  描述：音乐播放器html
  公司：xxx有限公司
  版权：xxx2020
  作者：oyjl
  时间：2020-04-16 12:22:36
  -->
<div class="r-audio" #audioMain>
  <!-- 主题面板 -->
  <div class="theme-panel">
    <div class="blue-theme" (click)="changeTheme('#44cef6')" title="天空蓝"></div>
    <div class="red-theme" (click)="changeTheme('#c32136')" title="中国红"></div>
    <div class="green-theme" (click)="changeTheme('#21a675')" title="墨玉绿"></div>
    <div class="black-theme" (click)="changeTheme('#020000')" title="典雅黑"></div>
    <div class="yellow-theme" (click)="changeTheme('#ff8936')" title="橘黄色"></div>
  </div>
  <!-- 音乐显示面板 -->
  <div class="show-panel">
    <div><span>{{ (audioSource && audioSource.name) || '对不起，没有音频数据'}}</span>&nbsp;<i *ngIf="isLoadAnimation"
        class="fa fa-spinner fa-spin"></i></div>
    <div>
      <audio #audioContainer [src]="audioSource && audioSource.src"></audio>
      <span>{{secondSwitchTime(audioContainer.currentTime)}} /
        {{(audioSource && secondSwitchTime(audioSource.time)) || '00:00'}}</span><br><br>
      <p-slider [(ngModel)]="currentTime" (onChange)="scheduleSet($event,audioContainer)" [style]="{'width':'100%'}"
        [animate]="false" [max]="audioContainer.duration">
      </p-slider>
    </div><br>
    <div><span>{{currentLrc}}</span></div>
  </div>
  <hr>
  <!-- 音乐控制面板 -->
  <div class="control-panel">
    <div><i class="fa fa-navicon" title="歌曲列表 共{{(audioList && audioList.length) || 0}}首" (click)="listToggle()"></i>
    </div>
    <div (click)="audioOrder(audioOrderBtn)"><i #audioOrderBtn class="fa fa-exchange" title="顺序播放"></i></div>
    <div (click)="volumeMute(audioContainer, audioVolumeBtn)"><i #audioVolumeBtn class="fa fa-volume-up"
        title="音量 {{audioContainer.volume * 100}}"></i>
    </div>
    <div>
      <p-slider [(ngModel)]="currentVolume" [style]="{'width':'100px'}" [animate]="true"
        (onChange)="volumeSet($event,audioContainer)"></p-slider>
    </div>
    <div (click)="audioBackward(audioContainer, audioPlayBtn)"><i class="fa fa-backward" title="上一曲"></i></div>
    <div (click)="audioPlay(audioContainer, audioPlayBtn)"><i #audioPlayBtn class="fa fa-play" title='播放'></i></div>
    <div (click)="audioForward(audioContainer, audioPlayBtn)"><i class="fa fa-forward" title='下一曲'></i></div>
  </div>
  <!-- 音乐列表面板 -->
  <div class="list-panel" *ngIf="listShow">
    <table>
      <tr class='audioHeader'>
        <th>歌名</th>
        <th>歌手</th>
        <th>播放时长</th>
        <th>文件大小</th>
        <th>操作</th>
      </tr>
      <tr class='audioBody' #audioListItem *ngFor="let item of audioList;let i = index"
        (click)="audioChoose(i, audioListItem)">
        <td>{{item.name}}</td>
        <td>{{item.singer}}</td>
        <td>{{secondSwitchTime(item.time)}}</td>
        <td>{{(item.size/1000/1000).toFixed(2) + 'M'}}</td>
        <td><a href="{{item.src}}" download="{{item.name + '.' + item.type}}"><i class="fa fa-download"></i>下载</a></td>
      </tr>
    </table>
  </div>
</div>

<!--
  使用方法如下：
  <app-r-autio-play [audioList]="audioList"></app-r-autio-play>
  public audioList: Array<object>;
      this.audioList = [{
      name: '世界这么大还是遇见你',
      type: 'mp3',
      singer: '程响',
      time: '237',
      size: '4800000',
      src: 'http://mp32.9ku.com/upload/128/2020/02/13/1002010.mp3',
      lrc: '../../../assets/music/世界这么大还是遇见你.json'
    },
    {
      name: '你的答案',
      type: 'wav',
      singer: '阿冗',
      time: '219',
      size: '3560000',
      src: 'http://mp32.9ku.com/upload/128/2019/11/08/998378.mp3',
      lrc: '../../../assets/music/你的答案.json'
    }];
-->
